<template>
	<view class="user-page">
	  <!-- 顶部栏 -->
	  <view class="header-bar">
		<image class="header-logo" src="/static/logo.png" mode="aspectFit" />
		<navigator url="/pages/user/notice/notice" class="header-right">
		  <view class="bell-box">
			<image class="bell-icon" src="/static/icon_notification.png" mode="aspectFit" />
			<view class="red-dot"></view>
		  </view>
		</navigator>
	  </view>

	  <!-- 用户信息卡 -->
	  <view class="user-info-card">
		<view class="toLogin" @click="sendDataAndJump">
			<image class="avatar" :src="userDetails.avatar" mode="aspectFill" />
		</view>
		<view class="user-info-main">
		  <view class="user-row">
			<text class="user-name">{{userDetails.nickname}}</text>
			<text class="user-id">ID：{{userDetails.id}}</text>
		  </view>
		  <view class="auth-row">
			<text class="auth-tip" :id="userDetails.card?'success-auth':''">{{ userDetails.card?"已完成认证":"您尚未进行实名认证，点击认证" }}</text>
			<navigator v-if="userDetails.vip_id" class="vip" url="/pages/user/vip/vip" style="display: inline;
    font-size: 12px;
    color: red;
    margin-left: 10px;
    padding: 5rpx 7px;
    border: 1rpx solid;">
			<text>{{userDetails.vip?.name}}</text>
			</navigator>
		  </view>
		 
		</view>
	  </view>
	  <view class="user-card">
		  <!-- 余额卡片 -->
		   <view class="balance-card">
		  		<view class="balance-title">用户余额（元）</view>
		  		<view class="balance-amount">{{userDetails.money}}</view>
		  		<view class="balance-btn-row">
		  		  <view @click="bind" class="balance-btn">提现</view>
		  		  <navigator class="balance-btn" url="/pages/user/cashRecord/cashRecord">提现记录</navigator>
		  		</view>
		   </view>
		  
		   <!-- 代理卡片 -->
		  <view class="agent-card">
				<view style="height: 120rpx;display: block;"></view>
		  		<view class="agent-title">{{userDetails.level_txt}}</view>
		  		<view class="agent-row">
		  		  <text class="agent-desc">您的累计业绩为{{userDetails.count_total_money}}！</text>
		  		  <navigator class="agent-more-btn" :url="'/pages/user/level/level?price='+userDetails.count_total_money">查看更多</navigator>
		  		</view>
		   </view>
	  </view>
	  

	  <!-- 菜单列表 -->
	  <view class="menu-list">
		  
		<view class="menu-item" @click="navigateToPercentage">
			<image class="menu-icon" src="/static/percentage_img.png" mode="aspectFit" />
		    <text class="menu-text">抽成设置</text>
		    <text class="menu-arrow">＞</text>
		</view>
		
		<navigator url="/pages/user/task/task" class="menu-item">
		  <image class="menu-icon" src="/static/tasklist.png" mode="aspectFit" />
		  <text class="menu-text">任务记录</text>
		  <text class="menu-arrow">＞</text>
		</navigator>
		<view class="menu-item" @click="navigateToInvite">
		  <image class="menu-icon" src="/static/user_share.png" mode="aspectFit" />
		  <text class="menu-text">邀友赚钱</text>
		  <text class="menu-arrow">＞</text>
		</view>
		<view @click="navigateToUserMoney" class="menu-item">
		  <image class="menu-icon" src="/static/creditRecord.png" mode="aspectFit" />
		  <text class="menu-text">收益记录</text>
		  <text class="menu-arrow">＞</text>
		</view>
		<view @click="navigateToTeam" class="menu-item">
		  <image class="menu-icon" src="/static/withdraw.png" mode="aspectFit" />
		  <text class="menu-text">我的团队</text>
		  <text class="menu-arrow">＞</text>
		</view>
		<view class="menu-item" @click="navigateToContacts">
		  <image class="menu-icon" src="/static/user_help.png" mode="aspectFit" />
		  <text class="menu-text">联系官方客服和上级推荐人</text>
		  <text class="menu-arrow">＞</text>
		</view>

		<view class="menu-item" @click="sendDataAndJump">
		  <image class="menu-icon" src="/static/user_setting.png" mode="aspectFit" />
		  <text class="menu-text">设置</text>
		  <text class="menu-arrow">＞</text>
		</view>
	  </view>
	</view>
  </template>

  <script setup>
	import { ref,reactive } from "vue"
	import { info } from "@/api/member.js"
	import {onShow} from "@dcloudio/uni-app"
  	import { useUserStore } from '@/store/userStore';
  	const userStore = useUserStore();
	uni.showLoading({
		title: '加载中'
	});
	const userDetails = reactive({});
	onShow(() => {
	  	console.log("onShow userDetails")
		if(userStore.userDetails !== null && userStore.userDetails !== undefined){
			Object.assign(userDetails,userStore.userDetails);
		}else{
			userInfo();
		}
	});
	
	const userInfo = async ()=>{
		let result = await info().then(res=>{
			console.log(res);
			Object.assign(userDetails, res);
      		userStore.setUser(res)
		}).catch(err=>{

		}).finally(res=>{
			uni.hideLoading()
		})
	}
	
  const sendDataAndJump = ()=>{
  	// 先触发全局事件
	  uni.$emit('updateUserDetails', {userDetails: userDetails});
  	  // 跳转到页面B
	  uni.navigateTo({
		url: `/pages/user/information/information?avatar=${userDetails.avatar}&nickname=${userDetails.nickname}&card=${userDetails.card}&alipay_account=${userDetails.alipay_account}&realname=${userDetails.realname}`
  	  });
  }

  const bind = ()=>{

	  let url = userDetails.card?"/pages/user/cash/cash":`/pages/user/bind/bind`
	  let query = `?avatar=${userDetails.avatar}&nickname=${userDetails.nickname}&card=${userDetails.card}&alipay_account=${userDetails.alipay_account}&realname=${userDetails.realname}`
	  uni.navigateTo({
	  		url: url+query
	  });
  }

  const navigateToUserMoney = () => {
	uni.navigateTo({
	  url: "/pages/user/userMoney/userMoney"
	});
  };

  const navigateToInvite = ()=>{
	  uni.navigateTo({
	    url: "/pages/user/invite/invite"
	  });
  }

  onShow(()=>{
	  console.log("onShow")
  });
  const navigateToContacts = () =>{
	  uni.navigateTo({
		url: "/pages/user/contacts/contacts"
	  });

  }
  
  const navigateToPercentage = () =>{
	  uni.navigateTo({
	  		url: "/pages/user/percentage/percentage"
	  });
  }
  
  const navigateToTeam = ()=>{
	  uni.navigateTo({
	  		url: "/pages/user/team/team"
	  });
  }
  </script>

  <style scoped>
	.user-card{
		position: relative;
	}
  .user-page {
	background: #f6f7fb;
	min-height: 100vh;
	padding-bottom: 40rpx;
  }

  /* 顶部栏 */
  .header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #4a83f5;
	height: 110rpx;
	padding: 0 24rpx;
  }
  .header-logo {
	width: 90rpx;
	height: 90rpx;
  }
  .header-right {
	display: flex;
	align-items: center;
  }
  .bell-box {
	position: relative;
	width: 100rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .bell-icon {
	width: 80rpx;
	height: 80rpx;
  }
  .red-dot {
	position: absolute;
	top: 15rpx;
	right: 8rpx;
	width: 14rpx;
	height: 14rpx;
	background: #ff2d2d;
	border-radius: 50%;
	border: 4rpx solid #fff;
  }

  /* 用户信息卡 */
  .user-info-card {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 0 0 24rpx 24rpx;
	margin: 0 0 24rpx 0;
	padding: 0 24rpx 0 24rpx;
	height: 120rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  }
  .avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: #eaf2ff;
	margin-right: 24rpx;
  }
  .user-info-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
  }
  .user-row {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
  }
  .user-name {
	font-size: 30rpx;
	color: #222;
	font-weight: bold;
	margin-right: 18rpx;
  }
  .user-id {
	font-size: 22rpx;
	color: #bbb;
  }
  .auth-row {
	margin-top: 2rpx;
  }
  .auth-tip {
	font-size: 20rpx;
	color: #ff2d2d;
	background: #fff0f0;
	border: 2rpx solid #ff2d2d;
	border-radius: 8rpx;
	padding: 2rpx 10rpx;
  }

  /* 余额卡片 */
  .balance-card {
	background: #4a83f5;
	margin: 32rpx 24rpx 0 24rpx;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(74,144,226,0.10);
	padding: 32rpx 24rpx 24rpx 24rpx;
	position: relative;
	z-index: 2;
	width: 80%;
	margin: 0 auto;
  }
  .balance-title {
	color: #fff;
	font-size: 24rpx;
	margin-bottom: 18rpx;
  }
  .balance-amount {
	color: #fff;
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 24rpx;
  }
  .balance-btn-row {
	display: flex;
	gap: 24rpx;
  }
  .balance-btn {
	flex: 1;
	background: #fff;
	color: #ff2d2d;
	font-size: 26rpx;
	border-radius: 32rpx;
	text-align: center;
	padding: 16rpx 0;
	font-weight: bold;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  }

  /* 代理卡片 */
  .agent-card {
	/* background: linear-gradient(90deg, #3a4a5d 0%, #4a90e2 100%); */
	background: linear-gradient(to right, #2f3430, #44576b);
	margin: 24rpx 24rpx 0 24rpx;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(74,144,226,0.10);
	padding: 24rpx;
	color: #fff;
	height: 250rpx;
	margin-top: -100rpx;
	
  }
  .agent-title {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 12rpx;
  }
  .agent-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
  }
  .agent-desc {
	font-size: 22rpx;
  }
  .agent-more-btn {
	background: #fff;
	color: #ff2d2d;
	font-size: 22rpx;
	border-radius: 32rpx;
	padding: 8rpx 28rpx;
	font-weight: bold;
	margin-left: 18rpx;
  }

  /* 菜单列表 */
  .menu-list {
	margin: 32rpx 0 0 0;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
	overflow: hidden;
  }
  .menu-item {
	display: flex;
	align-items: center;
	padding: 0 24rpx;
	height: 90rpx;
	border-bottom: 2rpx solid #f0f0f0;
  }
  .menu-item:last-child {
	border-bottom: none;
  }
  .menu-icon {
	width: 44rpx;
	height: 44rpx;
	margin-right: 18rpx;
  }
  .menu-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
  }
  .menu-arrow {
	font-size: 36rpx;
	color: #bbb;
  }
  #success-auth {
      border-style: solid;
      border-radius: 0;
      border-width: 1px;
      border-color: #0B7DF2;
      padding: 1%;
      font-size: 10px;
      color: #0B7DF2;
	  background-color: #fff;
  }
  </style>
